<!--
@Author bhudy
@Description ResOrderStageTemplate
@Date Wed Feb 19 17:05:03 CST 2020
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Sys - resOrderStageTemplate</title>
    <script src="/res/js/bhudy.js"></script>
    <script src="/res/layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:location.reload();">刷新</button>                        </div>
                    </div>
            </form>
            <table id="tableDataList" class="layui-table" lay-filter="tableDataList"
                   lay-data="{url:'/api/v1/resOrderStageTemplates', page:true, id:'tableDataList',toolbar:'default', defaultToolbar:['filter', 'exports', 'print']}">
                <thead>
                <tr>
                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                    <th lay-data="{field:'resOrderStageTemplateId', width:80, sort: true, fixed: 'left'}">ID</th>
                    <th lay-data="{field: 'templateName', width:150}">templateName</th>
                    <th lay-data="{field: 'resOrderTypeId', width:150}">resOrderTypeId</th>
                    <th lay-data="{field: 'stageSort', width:150}">stageSort</th>
                    <th lay-data="{field: 'stage', width:150}">stage</th>
                    <th lay-data="{field: 'handlingPersonal', width:150}">handlingPersonal</th>
                    <th lay-data="{field: 'kpi', width:150}">kpi</th>
                    <th lay-data="{field: 'status', width:150}">status</th>
                    <th lay-data="{field: 'createBy', width:150}">createBy</th>
                    <th lay-data="{field: 'createDate', width:150}">createDate</th>
                    <th lay-data="{field: 'updateBy', width:150}">updateBy</th>
                    <th lay-data="{field: 'updateDate', width:150}">updateDate</th>
                    <th lay-data="{field: 'remark', width:150}">remark</th>
                    <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#bar'}"></th>
                </tr>
                </thead>
            </table>

            <script type="text/html" id="bar">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['table', 'form', 'layedit', 'laydate'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            url = "/api/v1/resOrderStageTemplate",
            $ = layui.jquery;


        //监听头工具栏事件
        table.on('toolbar(tableDataList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , dataList = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    showUpdateOrCreate();
                    break;
                case 'update':
                    if (dataList.length === 0) {
                        layer.msg('请选择一行');
                    } else if (dataList.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        showUpdateOrCreate(dataList[0]);
                    }
                    break;
                case 'delete':
                    if (dataList.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        var resOrderStageTemplateIds = "";
                        dataList.forEach(data => {
                            resOrderStageTemplateIds += "," + data.resOrderStageTemplateId;                        });
                        delFun(resOrderStageTemplateIds);
                    }
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(tableDataList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                 delFun([data.resOrderStageTemplateId]);            } else if (obj.event === 'edit') {
                showUpdateOrCreate(data)
            }
        });

        // 搜索框
        form.on('submit(search)', function (data) {
            table.reload("tableDataList", {
                where: data.field,
                page: {curr: 1}//重新从第 1 页开始
            });
            return false;
        });

        // 修改或者添加方法
        form.on('submit(updateOrCreateBtn)', function (data) {
            if (data.field.resOrderStageTemplateId) {
                $.ajaxJsonPUT(url, JSON.stringify(data.field), function (resultData) {
                    resultFun(resultData);
                })
            } else {
                $.ajaxJsonPOST(url, JSON.stringify(data.field), function (resultData) {
                    resultFun(resultData);
                })
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        // 删除方法
        function delFun(ids) {
            layer.confirm('真的删除行么', function (index) {
                $.ajaxJsonDEL(url + "s", JSON.stringify(ids), function (resultData) {
                    layer.msg(resultData.message);
                    setTimeout(function () {
                        layer.closeAll();
                        table.reload("tableDataList", {
                            where: null,
                            page: {curr: 1}//重新从第 1 页开始
                        });
                    }, 2000);
                });
            });
        }

        // 拿到后台返回结果做处理
        function resultFun(resultData) {
            layer.msg(resultData.message);
            if (resultData.code === 0) {
                setTimeout(function () {
                    layer.closeAll();
                    table.reload("tableDataList", {
                        where: null,
                        page: {curr: 1}//重新从第 1 页开始
                    });
                }, 2000);
            }
        }

        // 显示修改或者添加弹出窗口
        function showUpdateOrCreate(data) {
            //页面层-自定义
            let index = layer.open({
                type: 1,
                title: '操作窗口',
                closeBtn: 1,
                skin: 'layui-layer-lan',
                maxmin: true,
                btn: ['提交', '取消'],
               yes: function (index, layero) {
                    $("#updateOrCreateBtn").click();
                    return false;
                },
                content: `<form class="layui-form" style="margin: 10px 50px;" action="" lay-filter="updateOrCreateForm">
                            <input type="hidden" name="resOrderStageTemplateId" lay-verify="resOrderStageTemplateId" autocomplete="off" class="layui-input">
                            <div class="layui-form-item">
                                <label class="layui-form-label">templateName</label>
                                <div class="layui-input-block">
                                    <input type="text" name="templateName" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">resOrderTypeId</label>
                                <div class="layui-input-block">
                                    <input type="text" name="resOrderTypeId" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">stageSort</label>
                                <div class="layui-input-block">
                                    <input type="text" name="stageSort" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">stage</label>
                                <div class="layui-input-block">
                                    <input type="text" name="stage" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">handlingPersonal</label>
                                <div class="layui-input-block">
                                    <input type="text" name="handlingPersonal" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">kpi</label>
                                <div class="layui-input-block">
                                    <input type="text" name="kpi" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">status</label>
                                <div class="layui-input-block">
                                    <input type="text" name="status" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">createBy</label>
                                <div class="layui-input-block">
                                    <input type="text" name="createBy" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">createDate</label>
                                <div class="layui-input-block">
                                    <input type="text" name="createDate" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">updateBy</label>
                                <div class="layui-input-block">
                                    <input type="text" name="updateBy" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">updateDate</label>
                                <div class="layui-input-block">
                                    <input type="text" name="updateDate" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">remark</label>
                                <div class="layui-input-block">
                                    <input type="text" name="remark" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <button type="submit" style="display: none;" id="updateOrCreateBtn" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="updateOrCreateBtn"></button>
                        </form>`
            });
            layer.full(index);
            // 绑定数据
            form.val('updateOrCreateForm', data);
        }
    });
</script>
</html>